const oDiv = document.querySelector('.footer1');

// 获取 4个ul
const oUls = oDiv.querySelectorAll('ul');

// 定义变量,存储获取数据,起始数据的索引下标
let start = 0;

// 定义一个变量,存储数据,控制请求执行
let bool = true;

// 一打开页面,就自动函数,发送ajax请求,获取页面的初始数据信息
setLi();


// 浏览器滚动监听事件
// 当浏览器滚动时 触发 监听事件

// JavaScript固定 浏览器滚动一次,会触发多次的 监听事件

window.onscroll = ()=>{
    // 获取数据:
    // 1, 浏览器上卷高度
    let scrollHeight = document.documentElement.scrollTop;
    
    // 2, 视窗窗口高度
    let windowHeight = document.documentElement.clientHeight;

    // 3, 定义预留高度 预留高度 根据实际项目需求设定
    // 当前是随便写个500
    let h = 500;
    
    // 4, 获取最矮ul高度
    let minUl = oUls[0];

    oUls.forEach( ul=>{
        if( minUl.offsetHeight > ul.offsetHeight ){
            minUl = ul;
        }
    })

    // minUl存储的是最矮ul的标签对象
    let minUlHeight = minUl.offsetHeight;

    

    // 判断  上卷高度 + 视窗窗口 + 预留高度 > 最矮ul高度 
    if( scrollHeight + windowHeight + h > minUlHeight ){
        // 添加判断
        if(!bool) return;
        bool = false;

        // 发起新的请求
        setLi();
    }

}
function myAjax(method , url , data , cb = function(){}){
    // 1, 创建 ajax 对象
    // 兼容低版本IE浏览器
    let xhr = {};
    
    if(XMLHttpRequest){
        //  标准浏览器
        xhr = new XMLHttpRequest();
    }else{
        // 兼容IE低版本
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    // 2, 设定open
    if( method === 'get' ){
        xhr.open('get' , `${url}?${data}`);
    }else{
        xhr.open('post' , url);
    }
  
    // 3, 如果是 post 设定请求头
    if ( method === 'post' ){
        xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
    }

    // 4, 发送 send post携带参数
    if( method === 'get' ){
        xhr.send();
    }else{
        xhr.send(data);
    }

    // 5, 请求结束 执行程序
    xhr.onreadystatechange = ()=>{
        
        if(xhr.readyState === 4 && /^2\d{2}$/.test( xhr.status ) ){
            // 请求成功返回响应体体内容
            // 请求成功 执行程序 对应的数据是 响应体数据
            // 也就是后端程序 输出的数据
            // 也就是 xhr.response  或者 xhr.responseText 其中 存储的数据
            cb( xhr.response );
        }else{
            // 请求失败返回报错内容
            // 请求失败的回调函数
        }
    }
}

 // 封装一个函数,向 服务器发送请求
 function setLi(){

    // 1, 获取时间戳,单位是 秒
    const time = new Date();
    let t = parseInt( time.getTime() / 1000 ); 

    // 2, 定义变量,存储搜索关键词
    let keyword = '美食菜谱';



    myAjax( 'get' , '/dt'  , `include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=${keyword}&start=${start}&_=${t}` , res=>{
        // 解析 JSON字符串 获取 数据结果对象
        const obj = JSON.parse(res)
        console.log( obj );

        // 给 start属性赋值下一次请求的起始索引下标
        start = obj.data.next_start;

        // 获取 24条数据的数组
        const arr = obj.data.object_list;
        console.log(arr);

        // 循环遍历数组,生成 页面内容
        // item 存储的 就是 数据对象
        arr.forEach(item=>{
            // 在 字符串中 动态生成页面内容
            let str = `
            <li>
                <div class="imgBox" style="height:${ parseInt(250*item.photo.height/item.photo.width)}px">
                    <img src="${item.photo.path}" alt="">
                </div>
                <div class="contentBox">
                    <p>
                        <span>${item.msg}</span>
                    </p>
                    <p>
                        <span style="${ item.like_count === 0 ? 'display:none' : ''  }">
                            <i class="glyphicon glyphicon-thumbs-up"></i><span>${item.like_count}</span>
                        </span>
                        <span style="${ item.favorite_count === 0 ? 'display:none' : ''  }">
                            <i class="glyphicon glyphicon-star-empty"></i><span>${item.favorite_count}</span>
                        </span>
                        
                        
                    </p>
                    <p>
                        <img src="${item.sender.avatar}"
                            alt="">
                        <span>
                            <span>
                                <a href="JavaScript:;">${item.sender.username}</a>
                            </span>
                            <span>  
                                发布到<a href="JavaScript:;">${item.album.name}</a>
                            </span>
                            
                        </span>
                    </p>
                </div>
            </li>
            `;
        
            // 找 最矮的ul 

            // 默认第一个ul最矮
            let minUl = oUls[0];

            // 循环遍历所有的ul,获取ul的高度
            // 如果 循环的ul高度,小于 minUl中存储的ul高度
            // 证明 当前循环到的ul 是更矮的ul 存储在 minUl标签中
            // 循环结束 minUl 中 存储的就是 最矮 的ul标签对象
            oUls.forEach( ul=>{
                if( minUl.offsetHeight > ul.offsetHeight ){
                    minUl = ul;
                }
            })
        
            // 最矮的ul,写入生成的li标签
            // 拼接吸入 新的li标签
            minUl.innerHTML += str;

            // 生成的字符串,都写入了页面
            // ul的高度已经改变,页面当前位置就是不是最矮ul的底部了
            // 已经停止发送请求了,可以给bool赋值为原始值true
            bool = true;
        })
    });
}
